<template>
  <!-- 自己写的 -->
  <div>
    <h1>welcome Login</h1>
    <div class="main">
      <!-- status-icon 加上这个可以显示输入的是否符合要求 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 50%; margin: 60px auto"
      >
        <el-form-item label="账号" prop="account">
          <!-- 可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。 -->
          <!-- 
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="input2"
          ></el-input> 
          -->

          <el-input placeholder="请输入账号" v-model="ruleForm.account">
            <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
          </el-input>
        </el-form-item>

        <el-form-item label="密码" prop="passWord">
          <el-input placeholder="请输入密码" v-model="ruleForm.passWord">
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <h3>
      <router-link to="login2" class="noUnderline goTo">跳转到下个登录页</router-link>
    </h3>
  </div>
</template>

<script>
export default {
  name: 'Login1',
  data() {
    return {
      ruleForm: {
        account: '',
        passWord: '',
      },
      rules: {
        account: { required: true, message: '账号必填！', trigger: 'blur' },
        passWord: { required: true, message: '密码必填！', trigger: 'blur' },
      },
    };
  },
  mounted() {
    //防止刷新出现login页面
    this.$parent.showLoginPageSelector = false;
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 表单验证通过
          const account = this.ruleForm.account;
          const passWord = this.ruleForm.passWord;

          // 检查账号和密码是否匹配
          if (account === 'admin' && passWord === 'admin') {
            // 账号密码匹配，导航到首页
            this.$router.push('/');
          } else {
            // 账号密码不匹配，输出错误信息
            console.log('账号或密码错误！');
          }
        } else {
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  beforeRouteLeave(to, from, next) {
    // 在路由离开前隐藏选择框
    this.$parent.showLoginPageSelector = false;

    if (to.name === 'login') {
      this.$parent.showLoginPageSelector = true;
    }

    next();
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 50vw;
  height: 40vh;
  margin: 30px auto;
  border: 1px solid;
}

.goTo {
  background-image: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
